<template>
    <div id="SliderSwitchButton" class="sliderSwitchButton">
        <router-link :to="{ 'name': buttonLink, 'params': buttonLinkParams }">
            <i class="fa" :class="buttonIconType"></i>
            <span>{{ buttonContent }}</span>
        </router-link>
    </div>
</template>

<script>
    export default {
        name: "SliderSwitchButton",
        props: {
            buttonLink: {
                type: String,
                default: 'home'
            },
            buttonLinkParams: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            buttonContent: {
                type: String,
                default: '点击'
            },
            buttonIconType: {
                type: String,
                default: 'fa-calendar-check-o'
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sliderSwitchButton {
        $transition_time : 0.3s;

        position: relative;
        margin-top: 3vh;
        padding-top: 0.5vh;
        font-size: 20px;
        transition: all $transition_time linear;

        a {
            position: relative;
            padding: 0.7vh 0;
            border: 1px solid #999999;
            display: inline-block;
            width: 12em;
            height: 100%;
            background: rgba(255, 255, 255, 0.75);
            color: #666666;
            text-decoration: none;
            overflow: hidden;
            transition: all $transition_time linear;

            &::after, &::before {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                content: '';
                background: #666666;
                z-index: -1;
            }

            &::after {
                left: -100%;
            }

            &::before {
                left: 100%;
                transition: all $transition_time ease-out;
            }

            &:hover {
                background: rgba(255, 255, 255, 0);
                border: 1px solid #666666;
                color: #ffffff;
            }

            &:hover::after, &:hover::before {
                left: 0;
            }

            &:hover::after {
                transition: all $transition_time ease-out;
            }

            &:hover::before {
                transition-delay: $transition_time;
            }
        }

        i {
            margin-right: 0.5em;
        }

        span {
            letter-spacing: 0.25em;
        }
    }
</style>
